<template>
  <Model-bg
    title="产能信息（月）"
    :width="467"
    :height="276"
    :top="15"
    router="/srceen/capacity"
  >
    <div id="capacity" />
  </Model-bg>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { screenCapacity } from "@/api/srceen/home";
export default {
  data() {
    return {
      xlist: [],
      dataList: [],
      colors: [
        ["#A0D0FF", "#A0D0FF"],
        ["#F6A228", "rgba(246,157,21,0.25)"],
      ],
    };
  },
  computed: {
    ...mapState({
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取图表数据
    getList() {
      screenCapacity().then((res) => {
        if (res.data) {
          this.xlist = res.data.xaxis || [];
          this.dataList = [
            {
              data: res.data.target || [],
              name: "目标",
              type: "line",
            },
            {
              data: res.data.actual || [],
              name: "产能",
              type: "pictorialBar",
            },
          ];
          this.$nextTick(() => {
            this.initChart();
          });
        }
      });
    },
    // 绘制图表
    initChart() {
      let domid = document.getElementById("capacity");
      if (domid?.hasAttribute("_echarts_instance_"))
        domid.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(domid);
      let legData = [];
      let series = [];
      this.dataList.forEach((item, index) => {
        legData.push({
          name: item.name,
          itemStyle: { opacity: item.type === "line" ? 0 : 1 },
        });
        let itemObj = {
          data: item.data,
          type: item.type,
          name: item.name,
          symbol: item.type === "line" ? "diamond" : "rect",
        };
        if (item.type === "pictorialBar") {
          itemObj = {
            ...itemObj,
            barGap: "0%",
            barWidth: 24,
            itemStyle: {
              color: () => {
                let colorItem = this.colors[index];
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: colorItem[0] },
                    { offset: 1, color: colorItem[1] },
                  ],
                  false
                );
              },
            },
          };
          let itemTop = {
            data: item.data,
            type: item.type,
            name: item.name,
            symbol:
              "image://",
            symbolSize: [26, 7],
            symbolOffset: [12, -4],
            symbolPosition: "end",
            z: 12,
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              offset: [12, 0],
              formatter: "{c}",
              color: "#fff",
            },
          };
          series.push(itemTop);
        }
        series.push(itemObj);
      });
      let color = [];
      this.colors.forEach((i) => {
        color.push({
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: i[0] },
            { offset: 1, color: i[1] },
          ],
          global: false,
        });
      });
      let option = {
        color: color,
        grid: {
          top: "24%",
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        tooltip: {
          show: false,
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        legend: {
          show: true,
          itemWidth: 10,
          itemHeight: 10,
          data: legData,
          right: "4%",
          top: "0%",
          textStyle: { color: "#fff" },
        },
        xAxis: {
          type: "category",
          data: this.xlist,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#5a718b" },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          show: this.dataList.length > 0,
          type: "value",
          name: "单位/%",
          nameGap: 20,
          splitNumber: 2,
          nameTextStyle: {
            fontSize: 10,
            color: "#DFEFFF",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#5a718b"],
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              fontSize: 12,
              color: "#fff",
            },
          },
        },
        series: series,
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#capacity {
  width: 100%;
  height: 100%;
}
</style>
